<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>微信JS-SDK Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <link rel="stylesheet" href="https://demo.open.weixin.qq.com/jssdk/css/style.css?ts=1420774989">
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"> </script>
    <script src="https://api.tianditu.gov.cn/api?v=4.0&tk=6a58e783547094bf6debfa3c7ef7738b"
        type="text/javascript"></script>
    <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
    <script>
        new VConsole();
    </script>
</head>

<body ontouchstart="">
    <div class="wxapi_container">
        <div class="lbox_close wxapi_form">
            <h3 id="menu-basic">基础接口</h3>
            <span class="desc">判断当前客户端是否支持指定JS接口</span>
            <button class="btn btn_primary" id="checkJsApi">checkJsApi</button>
        </div>

        <div class="lbox_close wxapi_form">
            <h3 id="menu-basic">获取定位</h3>
            <span class="desc">获取当前坐标</span>
            <br>
            <b>经度</b> <i id="longitude">0</i>
            <b>纬度</b> <i id="latitude">0</i>
            <br>
            <b>速度</b> <i id="speed">0</i>
            <b>精度</b> <i id="accuracy">0</i>
            <button class="btn btn_primary" id="getLocation">getLocation</button>
        </div>

        <div class="lbox_close wxapi_form">
            <h3 id="menu-basic">打开地图</h3>
            <span class="desc">将上一步获取到的坐标映射到地图</span>
            <button class="btn btn_primary" id="openLocation">openLocation</button>
        </div>

        <div id="mapDiv" style="width:100vw; height:100vw"></div>
    </div>
</body>
<script>

    let latitude = 0, longitude = 0, speed = 0, accuracy = 0;
    let map, zoom = 18;

    document.querySelector('#checkJsApi').onclick = function () {
        wx.checkJsApi({
            jsApiList: [
                'openLocation',
                'getLocation',
            ],
            success: function (res) {
                alert(JSON.stringify(res));
            }
        });
    };

    // 果娃
    const noncestr = "Wm3WZYTPz0wzccnW";
    const timestamp = String(Date.now()).substring(0, 10);
    fetch("/api/wexin_open/get_jsticket_signature/", {
        method: "POST", // or 'PUT'
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            subscription_id: 1,
            noncestr,
            timestamp,
            url: window.location.href// FIXME IOS其实应使用进入页url
        })
    })
        .then((response) => response.json())
        .then((data) => {
            console.log("Success:", data);

            wx.config({
                // debug: true,
                appId: data.data.subscription_appid,
                timestamp,
                nonceStr: noncestr,
                signature: data.data.signature,
                jsApiList: [
                    'checkJsApi',
                    'openLocation',
                    'getLocation',
                    'hideOptionMenu',
                ]
            });
        })
        .catch((error) => {
            console.error("Error:", error);
        });
    //Zhang
    // fetch("http://121.41.56.49/getJsSdkUiPackage", {
    //     method: "POST", // or 'PUT'
    //     headers: {
    //         "Content-Type": "application/json",
    //     },
    //     body: JSON.stringify({
    //         Url: window.location.href// FIXME IOS其实应使用进入页url
    //     }),
    // })
    //     .then((response) => response.json())
    //     .then((data) => {
    //         console.log("Success:", data);

    //         wx.config({
    //             // debug: true,
    //             appId: data.result.appId,
    //             timestamp: data.result.timestamp,
    //             nonceStr: data.result.nonceStr,
    //             signature: data.result.signature,
    //             jsApiList: [
    //                 'checkJsApi',
    //                 'openLocation',
    //                 'getLocation',
    //                 'hideOptionMenu',
    //             ]
    //         });
    //     })
    //     .catch((error) => {
    //         console.log("Error:", error);
    //     });


    wx.ready(function () {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

        wx.hideMenuItems({
            menuList: ["menuItem:copyUrl"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        });

        document.querySelector('#getLocation').onclick = function () {
            wx.getLocation({
                type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                    latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    speed = res.speed; // 速度，以米/每秒计
                    accuracy = res.accuracy; // 位置精度

                    document.getElementById("latitude").innerHTML = latitude;
                    document.getElementById("longitude").innerHTML = longitude;
                    document.getElementById("speed").innerHTML = speed;
                    document.getElementById("accuracy").innerHTML = accuracy;


                }
            });
        };

        document.querySelector('#openLocation').onclick = function () {
            // wx.openLocation({
            //     latitude, // 纬度，浮点数，范围为90 ~ -90
            //     longitude, // 经度，浮点数，范围为180 ~ -180。
            //     name: '自定义位置名称', // 位置名
            //     address: '自定义地址详细说明', // 地址详情说明
            //     scale: 18, // 地图缩放级别,整型值,范围从1~28。默认为最大
            //     infoUrl: 'https://www.baidu.com' // 在查看位置界面底部显示的超链接,可点击跳转
            // });
            map = new T.Map('mapDiv');
            map.centerAndZoom(new T.LngLat(longitude, latitude), zoom);

            //创建标注对象
            const marker = new T.Marker(new T.LngLat(longitude, latitude));
            //向地图上添加标注
            map.addOverLay(marker);

            const miniMap = new T.Control.OverviewMap({
                isOpen: true,
                size: new T.Point(150, 150)
            });
            map.addControl(miniMap);
        };

    });

    wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });

</script>

</html>